import React, {Component} from 'react';

import {
    Layout,
    Button,
    Select,
    Input,
    Row,
    Col,
    Table,
    Divider,
    Tree,
    Checkbox,
    Modal,
    Form,
    message,
    Tabs,
    Collapse,
    List,
} from 'antd';
import '../App.css';
import {
    PlusOutlined,
    DeleteRowOutlined,
    ExclamationCircleOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined,
    RightOutlined,
} from '@ant-design/icons';


import '../pages/webExcel.css'
import {getFormFolderTree, getForms, saveFolder, delFormFolder, getForm, saveForm,deleteForm} from "../api/formManagement";
import {Link} from "react-router-dom";
import {getDimMbrs, getDims} from "../api/dim";

const {Option} = Select;
const {Panel} = Collapse;

export default class FormManagement extends Component {


    constructor(props) {
        super(props)
        this.state = {
            formFolders: [],   //表单文件夹 左边表单数的数据
            selectedFolderId: -1,
            selectedFoldName: "",    //文件夹名称  新增加的时候 设置为""
            modifyFoldName: "",  //传给编辑框--文件夹名称
            modalTitle: '',
            isModalVisible: false,
            selectedFormId: -1,  //选中的表单id 弃用？
            selectedFormIds: [],  //选中的表单id 数组 存放的是key
            isModalVisibleForFold: false,  //文件夹

            status: -1,  //
            forms: [],  //表单
            isModalVisibleForForm: false, //表单编辑
            isModalVisibleForSelDimMbr: false,//选择维度成员

            //下面是表单详细
            //formId:-1,  用selectedFormId代替
            formId: 0,   //传递到Modal当中
            formName: "",  //报表名称
            reportDesc: "",  //报表描述
            remark: "",       //说明
            scale: 2,
            // dims:[],
            colDims: [],
            rowDims: [],
            pageDims: [],
            viewDims: [],

            dims_option: [],
            dims_all: [],

            rowLayouts: [],
            colLayouts: [],
            pageLayouts: [],
            viewLayouts: [],
            // colMembers:[],
            // rowMembers:[]

            treeData_forSelDimMbr: [],   //供选择的维度成员

            targetFormLayout_Mbrs: [],   //target dimession member

            selectedMbr: {},  //选中的维度成员
            selectedFunId: 0,   //选中的方法
            funList: [
                '成员',
                '后代',
                '后代 (包含)',
                '子代',
                '子代 (包含)',
                '祖先',
                '祖先 (包含)',
                '父代',
                '父代 (包含)',
                '同级',
                '同级 (包含)',
                '零级后代',
                '零级后代(包含)'
            ],

            layout_type: 0,  //表单tab
            group_no: 0,//布局的组编号
            index_layoutMbr: 0,  //index_dims  一个具体布局的index    这个名字没起好

            formDefStatus: -1 //表单状态呢 0 是编辑  1是新增
        }
    }

    componentDidMount() {
        //查询后端  把后端数据组织到前端
        getFormFolderTree().then(
            (res) => {
                this.setState({formFolders: res.data.children});
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    }

    //根据fold Id  刷新
    refreshForm(foldId){
        getForms(foldId).then(
            (res) => {
                this.setState({
                    forms: res.data,
                    selectedFolderId: foldId,
                });

            },
            (error) => {
                // this.setState({
                //     selectedFolderId: foldId,
                //
                // });
                console.log("get response failed!");
            }
        );
    }

    refreshData(_that) {
        //查询后端  把后端数据组织到前端
        getFormFolderTree().then(
            (res) => {
                _that.setState({formFolders: res.data.children});
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    }


    refreshForms(_that) {
        //查询后端  把后端数据组织到前端
        let _formId=_that.state.selectedFormIds[0];
        let _forms=_that.state.forms;
       // alert(_forms.findIndex(item => item.id === _formId));
        //
        // let s=_forms.splice(1, 1)
        _that.refreshForm(_that.state.selectedFolderId);
        _that.setState({selectedFormIds: []});
    }


    formFolderRef = React.createRef();
    formRef = React.createRef();


    onSearch = value => console.log(value);


    cancelModal = () => {
        this.setState({
            isModalVisible: false,
        });
    };

    openModifyFormModal = () => {
        let _ids = this.state.selectedFormIds;
        if (_ids.length > 1) {
            message.info("只能选择一个表单")
            return;
        }
        if (_ids.length < 1) {
            message.info("必须选择一个表单")
            return;
        }
        let _formId = _ids[0];
        getForm(_formId).then(
            (res) => {
                this.setState({
                    formId: res.data.id,
                    formName: res.data.name,
                    remark: res.data.remark,
                    reportDesc: res.data.desc,
                    scale: res.data.scale,
                    // formId:res.data.id,
                    colDims: res.data.colDims,
                    rowDims: res.data.rowDims,
                    pageDims: res.data.pageDims,
                    viewDims: res.data.viewDims,
                    dims_option: [],   //
                    // colMembers:res.data.colMembers,
                    // rowMembers:res.data.rowMembers,
                    // pageMembers:res.data.pageMembers,
                    // viewMembers:res.data.viewMembers,
                    rowLayouts: res.data.rowLayout.layouts_xy,  //组的集合
                    colLayouts: res.data.colLayout.layouts_xy,  //组的集合
                    pageLayouts: res.data.pageLayout.layouts_pv,  //页面
                    viewLayouts: res.data.viewLayout.layouts_pv,  //view
                    formDefStatus: 0,
                    isModalVisibleForForm: true,
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    };

//创建表单
    openFormModalForCreating = () => {
        if (this.state.selectedFolderId === undefined || this.state.selectedFolderId === ""
            || this.state.selectedFolderId == "-1" || this.state.selectedFolderId == -1
            || this.state.selectedFolderId == null) {
            message.info("请选择一个节点！")
            return
        }
        getDims().then(
            (res) => {
                this.setState({
                    formId: 0,
                    formName: "",
                    remark: "",
                    reportDesc: "",
                    scale: 2,
                    // formId:res.data.id,
                    colDims: [],
                    rowDims: [],
                    pageDims: [],
                    viewDims: [],
                    dims_option: res.data,   //

                    rowLayouts: [{
                        "position": 0,
                        "groupName": "",
                        "theLayouts": []
                    }],  //组的集合
                    colLayouts: [{
                        "position": 0,
                        "groupName": "",
                        "theLayouts": []
                    }],  //组的集合
                    pageLayouts: [],  //页面
                    viewLayouts: [],  //view

                    isModalVisibleForForm: true,
                    formDefStatus: 1 //new  create status
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    };


    //选中表单
    // selectForm=(formId)=>{
    //     this.setState({selectedFormId:formId});
    // }
    //_selectedFormIds=this.state.selectedFormIds;
    //let _that =this;
    render() {

        let _that0 =this;
        const {Header, Footer, Sider, Content} = Layout;
        const {TabPane} = Tabs;


        const data = [
            'Racing car sprays burning fuel into crowd.',
            'Japanese princess to wed commoner.',
            'Australian walks 100km after outback crash.',
            'Man charged over missing wedding girl.',
            'Los Angeles battles huge wildfires.',
        ];


        const data2 = [
            {
                title: 'Ant Design Title 1',
            },
            {
                title: 'Ant Design Title 2',
            },
            {
                title: 'Ant Design Title 3',
            },
            {
                title: 'Ant Design Title 4',
            },
        ];


        //let _row_g_0=this.state.rowLayouts[0]

        //表单编辑modal
        // const handleOk = () => {
        //     this.setState({
        //         isModalVisibleForForm: false,
        //     });
        // };

        //control modal visiable for select dimession member
        const handleOk_selDimMbr = () => {
            //把target给
            let _layout_type = this.state.layout_type;
            let _group_no = this.state.group_no;
            let _index_layoutMbr = this.state.index_layoutMbr;  //布局当中的位置
            let _fm = [];
            this.state.targetFormLayout_Mbrs.forEach((item, index) => {
                let _mbr = createMbr_in_Layout(item.id, item.name, 0, item.queryType)
                _fm.push(_mbr);
            });

//遍历target  调用构造方法 形成布局
            switch (_layout_type) {
                case 0: {  //行布局
                    this.state.rowLayouts[_group_no].theLayouts[_index_layoutMbr].formLayout_Mbrs = _fm;
                    this.setState({
                        isModalVisibleForSelDimMbr: false,
                        rowLayouts: this.state.rowLayouts
                    });
                    //语句
                    break;
                }
                case 1: {
                    //语句
                    this.state.colLayouts[_group_no].theLayouts[_index_layoutMbr].formLayout_Mbrs = _fm;
                    this.setState({
                        isModalVisibleForSelDimMbr: false,
                        colLayouts: this.state.colLayouts
                    });
                    break;
                }
                case 2: {
                    console.log("fmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfmfm")
                    console.log(_fm)

                    this.state.pageLayouts[_index_layoutMbr].formLayout_Mbrs = _fm;
                    this.setState({
                        isModalVisibleForSelDimMbr: false,
                        pageLayouts: this.state.pageLayouts
                    });
                    break;
                }
                case 3: {
                    this.state.viewLayouts[_index_layoutMbr].formLayout_Mbrs = _fm;
                    this.setState({
                        isModalVisibleForSelDimMbr: false,
                        viewLayouts: this.state.viewLayouts
                    });
                    break;
                }
                default: {
                    //语句
                    break;
                }
            }
        };
        //control modal visiable for select dimession member
        const handleCancel_selDimMbr = () => {
            this.setState({
                isModalVisibleForSelDimMbr: false,
            });
        };
//点击选择按钮
        const select_dim_mbr = (dimType, layout_type, index_group, index_dims) => {
            //查询后台数据
            let _dimType = dimType;
            //查询后端  把后端数据组织到前端
            let _targetFormLayout_Mbrs = [];
            let _layouts = [];

            if (layout_type === 0) {        //行布局
                _layouts = this.state.rowLayouts;
            } else if (layout_type === 1) { //列布局
                _layouts = this.state.colLayouts;
            } else if (layout_type === 2) {  //页面
                _layouts = this.state.pageLayouts;
            } else if (layout_type === 3) {   //视点
                _layouts = this.state.viewLayouts;
            }

            if (layout_type === 0 || layout_type === 1) {
                _layouts[index_group].theLayouts[index_dims].formLayout_Mbrs.forEach((item, index) => {
                    let obj_t = new Object();
                    Object.assign(obj_t, item);
                    _targetFormLayout_Mbrs.push(
                        obj_t
                    );
                });
            } else if (layout_type === 2 || layout_type === 3) {
                _layouts[index_dims].formLayout_Mbrs.forEach((item, index) => {
                    let obj_t = new Object();
                    Object.assign(obj_t, item);
                    _targetFormLayout_Mbrs.push(
                        obj_t
                    );
                });


            }

            getDimMbrs(_dimType).then(
                (res) => {
                    this.setState({
                        treeData_forSelDimMbr: res.data.children,
                        isModalVisibleForSelDimMbr: true,
                        targetFormLayout_Mbrs: _targetFormLayout_Mbrs,
                        layout_type: layout_type,
                        group_no: index_group,  //
                        index_layoutMbr: index_dims  //布局维度结构中的index
                    });
                })
        }
// 选择文件夹 点击树节点触发
        const onSelect = (selectedKeys, info) => {
            console.log('selected', selectedKeys, info.selectedNodes);
            if (info != undefined && info.selectedNodes.length == 1) {
                let _folderId = info.selectedNodes[0].key
                getForms(_folderId).then(
                    (res) => {
                        this.setState({
                            forms: res.data,
                            selectedFolderId: info.selectedNodes[0].key,
                            selectedFoldName: info.selectedNodes[0].title,
                            selectedFormIds:[]
                        });
                        console.log('selected@@@@@@@@@@@@@@'+this.state.selectedFolderId );

                    },
                    (error) => {
                        this.setState({
                            selectedFolderId: info.selectedNodes[0].key,
                            selectedFoldName: info.selectedNodes[0].title,
                        });
                        console.log("get response failed!");
                    }
                );
            } else {
                message.info("请选择一个节点！")
                return
            }
        };

        const onSelect_selectMbr = (selectedKeys, info) => {
            console.log('selected', selectedKeys, info.selectedNodes);
            if (info !== undefined && info.selectedNodes.length == 1) {
                let _mbrId = info.selectedNodes[0].key;
                let _mbrName = info.selectedNodes[0].title;
                let _o = {
                    id: _mbrId,
                    name: _mbrName
                }
                this.setState({selectedMbr: _o})

            } else {
                message.info("请选择一个节点！")
            }
        };

        const handleOk_folder = () => {
            this.formFolderRef.current.submit();
        };

        const handleCancel_folder = () => {
            this.setState({
                isModalVisibleForFold: false,
            });
        };

        const handleCancel_formModify = () => {
            this.setState({
                isModalVisibleForForm: false,
            });
        };


        const handleOk_formModify = () => {
            //调用fom finish
            this.formRef.current.submit();
            // this.setState({
            //     isModalVisibleForForm: false,
            // });
        };

        const createFolder = () => {
            // eslint-disable-next-line eqeqeq
            if (this.state.selectedFolderId === undefined || this.state.selectedFolderId === ""
                || this.state.selectedFolderId == "-1" || this.state.selectedFolderId == -1
                || this.state.selectedFolderId == null) {
                message.info("请选择一个节点！")
                return
            }
            this.setState({
                status: 1,   //  create fold Name
                modifyFoldName: "",
                isModalVisibleForFold: true,

            });
        }


        const editFolder = () => {
            if (this.state.selectedFolderId == undefined || this.state.selectedFolderId == ""
                || this.state.selectedFolderId == "-1" || this.state.selectedFolderId == -1
                || this.state.selectedFolderId == null) {
                message.info("请选择一个节点！")
                return
            }
            this.setState({
                status: 0,   //  create fold Name
                isModalVisibleForFold: true,
                modifyFoldName: this.state.selectedFoldName,
            });
        }

        //删除
        const deleteFolder = () => {
            if (this.state.selectedFolderId == undefined || this.state.selectedFolderId == ""
                || this.state.selectedFolderId == "-1" || this.state.selectedFolderId == -1
                || this.state.selectedFolderId == null) {
                message.info("请选择一个节点！")
                return
            }
            let _id = this.state.selectedFolderId;
            const {confirm} = Modal;
            let _that = this;
            let _refreshData = this.refreshData;
            confirm({
                title: 'Do you Want to delete this items',
                icon: <ExclamationCircleOutlined/>,
                content: '删除选中的节点',
                onOk() {
                    delFormFolder(_id).then(
                        (res) => {
                            _refreshData(_that);
                            message.success("操作成功")
                            // 刷缓存;
                        },
                        (error) => {
                            message.success("操作失败")
                        }
                    );
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        }

        //delete form
        const delForm = () => {
            let _ids = this.state.selectedFormIds;
            if (_ids.length > 1) {
                message.info("只能选择一个表单")
                return;
            }
            if (_ids.length < 1) {
                message.info("必须选择一个表单")
                return;
            }
            let _formId = _ids[0];
            const {confirm} = Modal;
            let _that = this;
            let _refreshData = this.refreshForms;
            confirm({
                title: 'Do you Want to delete this items',
                icon: <ExclamationCircleOutlined/>,
                content: '删除选中的节点',
                onOk() {
                    deleteForm(_formId).then(
                        (res) => {
                            _refreshData(_that);
                            message.success("操作成功")
                            // 刷缓存;
                        },
                        (error) => {
                            message.success("操作失败")
                        }
                    );
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        }


        const layout_fold = {
            labelCol: {span: 8},
            wrapperCol: {span: 16},
        };
        const onFinish_fold = (values) => {
            let name = values.name_folder;
            let _id = this.state.selectedFolderId;
            if (this.state.status === 1) {  //新增加
                saveFolder(1, _id, -1, name).then(
                    (res) => {
                        this.componentDidMount();
                        message.success("保存成功")
                        // 刷缓存;

                    },
                    (error) => {
                        this.componentDidMount();
                        message.success("保存失败")
                    }
                );


            } else if (this.state.status === 0) { //编辑
                saveFolder(0, -1, _id, name).then(
                    (res) => {
                        this.componentDidMount();
                        message.success("保存成功")
                        // 刷缓存;
                    },
                    (error) => {
                        this.componentDidMount();
                        message.success("保存失败")
                    }
                );
            }
            this.setState({state: -1, isModalVisibleForFold: false})
        }

        //编辑表单
        const onFinish_modifyForm = (values) => {
            console.log(values)
            // let _formIds=this.state.selectedFormIds;
            // let _formIdValue=0;
            // if(_formIds!=undefined && _formIds.length==1){
            //      _formIdValue=_formIds[0];
            // }


            //let _formId = _formIdValue;  //todo
            let _formId = values.formId;
            let _formName = values.formName;  //表单名称
            let _reportDesc = values.reportDesc;  //描述
            let _remark = values.remark;  //编制说明
            let _scale = values.scale;  //精度
            let _approval = values.approval;  //是否送审
            let _folderId = this.state.selectedFolderId;
            let _formDefStatus=this.state.formDefStatus;

            let _colDimIds = [];
            let _rowDimIds = [];
            let _pageDimIds = [];
            let _viewDimIds = [];

            let _colDims = this.state.colDims;

            _colDims.forEach((item, index) => {
                let _dimId = item.id;
                _colDimIds.push(_dimId);
            })
            let _rowDims = this.state.rowDims;
            _rowDims.forEach ((item, index) => {
                let _dimId = item.id;
                _rowDimIds.push(_dimId);
            })

            let _pageDims = this.state.pageDims;
            if (_pageDims != null && _pageDims.length > 0) {
                _pageDims.forEach((item, index) => {
                    let _dimId = item.id;
                    _pageDimIds.push(_dimId);
                })
            }
            let _viewDims = this.state.viewDims;
            if (_viewDims != null && _viewDims.length > 0) {
                _viewDims.forEach((item, index) => {
                    let _dimId = item.id;
                    _viewDimIds.push(_dimId);
                })
            }
            //
            let _colLayouts=this.state.colLayouts;
            let _groups_col=[];
            _colLayouts.forEach((item,index_group)=>{
                //构造group
                let _g=createGroup(index_group,"colgroupName"+index_group);
                _groups_col.push(_g)
                item.theLayouts.forEach((_theLayout,i)=>{
                    let _newLayoutObj=createnewLayoutObj(i,"collayout"+"_"+index_group+"_"+i);

                    //createNewLayoutMbr
                    _theLayout.formLayout_Mbrs.forEach((mbr,j)=>{
                        let _dimId=_colDims[i].id;
                        let _id=0;  //todo
                        let _layoutType=mbr.type; //todo
                        let _memberId=mbr.id;
                        let _ordinal=j;
                        let _queryType=mbr.queryType;
                        let _readonly=0;
                        let _newLayoutMbr=  createNewLayoutMbr(_dimId, _formId,_id,index_group,_layoutType,_memberId,_ordinal,_queryType,_readonly);
                        _newLayoutObj.formLayout_Mbrs.push(_newLayoutMbr);  //new layout obj
                    })
                    _g.theLayouts.push(_newLayoutObj);
                })
            })

            let _groups_row=[];
            _rowLayouts.forEach((item,index_group)=>{
                //构造group
                let _g=createGroup(index_group,"rowGroupName"+index_group);
                _groups_row.push(_g)
                item.theLayouts.forEach((_theLayout,i)=>{
                    let _newLayoutObj=createnewLayoutObj(i,"rowlayout"+"_"+index_group+"_"+i);

                    //createNewLayoutMbr
                    _theLayout.formLayout_Mbrs.forEach((mbr,j)=>{
                        let _dimId=_rowDims[i].id;
                        let _id=0;  //todo
                        let _layoutType=mbr.type; //todo
                        let _memberId=mbr.id;
                        let _ordinal=j;
                        let _queryType=mbr.queryType;
                        let _readonly=0;
                        let _newLayoutMbr=  createNewLayoutMbr(_dimId, _formId,_id,index_group,_layoutType,_memberId,_ordinal,_queryType,_readonly);
                        _newLayoutObj.formLayout_Mbrs.push(_newLayoutMbr);  //new layout obj
                    })
                    _g.theLayouts.push(_newLayoutObj);
                })
            })

            let _layouts_page=[];

            _pageLayouts.forEach((_theLayout,index_layouts_pv)=>{

                let _newLayout=createnewLayoutObj(index_layouts_pv, "pageLayout"+index_layouts_pv);
                //createNewLayoutMbr
                _theLayout.formLayout_Mbrs.forEach((mbr,j)=>{
                    let _dimId=_pageDims[index_layouts_pv].id;
                    let _id=0;  //todo
                    let _layoutType=mbr.type; //todo
                    let _memberId=mbr.id;
                    let _ordinal=j;
                    let _queryType=mbr.queryType;
                    let _readonly=0;
                    let _newLayoutMbr=  createNewLayoutMbr(_dimId, _formId,_id,index_layouts_pv,_layoutType,_memberId,_ordinal,_queryType,_readonly);
                    _newLayout.formLayout_Mbrs.push(_newLayoutMbr);  //new layout obj
                })
                _layouts_page.push(_newLayout);
            })


            let _layouts_view=[];
            _viewLayouts.forEach((_theLayout,index_layouts_pv)=>{

                let _newLayout=createnewLayoutObj(index_layouts_pv, "viewLayout"+index_layouts_pv);
                //createNewLayoutMbr
                _theLayout.formLayout_Mbrs.forEach((mbr,j)=>{
                    let _dimId=_viewDims[index_layouts_pv].id;
                    let _id=0;  //todo
                    let _layoutType=mbr.type; //todo
                    let _memberId=mbr.id;
                    let _ordinal=j;
                    let _queryType=mbr.queryType;
                    let _readonly=0;
                    let _newLayoutMbr=  createNewLayoutMbr(_dimId, _formId,_id,index_layouts_pv,_layoutType,_memberId,_ordinal,_queryType,_readonly);
                    _newLayout.formLayout_Mbrs.push(_newLayoutMbr);  //new layout obj
                })
                _layouts_view.push(_newLayout);
            })



            let _obj = {
                "id": _formId,
                "cubeId": 101,
                "name": _formName,
                "desc": _reportDesc,
                "remark": _remark,
                "status":_formDefStatus,
                "folderId": parseInt(_folderId),
                "description": 0,
                "setFormShuoMingId": 0,
                "approval": 0,  //todo
                "showway": 0,
                "scale": parseInt(_scale),
                "colLayout": {
                    "dims": _colDimIds,
                    "layouts_xy": _groups_col
                },

                "rowLayout": {
                    "dims": _rowDimIds,
                    "layouts_xy": _groups_row,
                },

                "pageLayout": {
                    "dims": _pageDimIds,
                    "layouts_pv": _layouts_page
                },


                "viewLayout": {
                    "dims": _viewDimIds,
                    "layouts_pv": _layouts_view
                },


                "formBusinessRules": [{
                    "businessRuleId": 0,
                    "formId": 0,
                    "id": 0,
                    "loadTypeOpen": 0,
                    "loadTypeSave": 0
                }]
            }
            //这一段暂时不删除！！xj
            // if (this.state.formDefStatus === 1) {  //新增加
            //     saveForm(_obj).then(
            //         (res) => {
            //             //把后端数据组织到前端
            //             //this.componentDidMount();
            //             this.refreshForm(this.state.selectedFolderId);
            //             message.success("保存成功")
            //             // 刷缓存;
            //
            //             this.setState({
            //                 isModalVisibleForForm: false,
            //              });
            //
            //
            //
            //         },
            //         (error) => {
            //             //this.componentDidMount();
            //             message.success("保存失败")
            //         }
            //     );
            //
            //
            // } else if (this.state.status === 0) { //编辑
            //
            // }
            console.log(" saveForm(_obj) obj  saveForm(_obj) obj  saveForm(_obj) obj  saveForm(_obj) obj  saveForm(_obj) obj ")

            console.log(_obj)
            saveForm(_obj).then(
                (res) => {
                    //把后端数据组织到前端
                    //this.componentDidMount();
                    this.refreshForm(this.state.selectedFolderId);
                    message.success("保存成功")
                    // 刷缓存;

                    this.setState({
                        isModalVisibleForForm: false,
                    });



                },
                (error) => {
                    //this.componentDidMount();
                    message.success("保存失败")
                }
            );




            //this.setState({state: -1, isModalVisibleForFold: false})

            // this.setState({
            //     isModalVisibleForForm: false,
            // });
        }
        //失败的调用
        const onFinishFailed_modifyForm = (values) => {
            console.log(values)
        }

        let modifyName = this.state.modifyFoldName;

        const formColumns = [
            {
                title: '表单名称',
                dataIndex: 'name',
                id: 'id',
            }]


        // const formRowSelection = {
        //     onChange: (selectedRowKeys, selectedRows) => {
        //
        //           //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        //     },
        //     onSelect: (record, selected, selectedRows) => {
        //
        //         console.log(selectedRows);
        //
        //         // if(selected){
        //         //     this.props.selectForm (record.id);
        //         // }else{
        //         //     //todo
        //         // }
        //     },
        //
        // };


        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                // selectedRowKeys是个数组
                this.setState({selectedFormIds: selectedRowKeys});
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: (record) => ({
                disabled: record.name === 'Disabled User',
                // Column configuration not to be checked
                name: record.name,
            }),
        };


        const callback_Form = (key) => {
            console.log(key)
            let _key = parseInt(key)

        }

//点击组tab
        const callback_group = (key) => {
            console.log(key);
            let _gourp_no = parseInt(key)

        }


        function callback(key) {
            console.log(key);
        }


        //初始化表单antd_form 用
        let _formId = this.state.formId;
        let _formName = this.state.formName;
        let _reportDesc = this.state.reportDesc;
        let _remark = this.state.remark;
        let _scale = this.state.scale + "";
        let _approval = this.state.approval;
        let _colDims = this.state.colDims;
        let _rowDims = this.state.rowDims;
        let _pageDims = this.state.pageDims;
        let _viewDims = this.state.viewDims;
        let _dims_option = this.state.dims_option;  //可选择的

        let _rowLayouts = this.state.rowLayouts;
        let _colLayouts = this.state.colLayouts;
        let _pageLayouts = this.state.pageLayouts;
        let _viewLayouts = this.state.viewLayouts;

        //let _viewLayouts=this.state.viewLayouts;


//精度 scale
        const handleChange = (value) => {

        }

        //选择方法（成员 包含子代等）
        const handleChange_function = (value) => {
            console.log(value)
            this.setState({selectedFunId: parseInt(value)})
        }

//送审checkbox
        const onChange_approval = e => {
            console.log(`checked = ${e.target.checked}`);
        }


//delete dimession by  dimession id
//         1、从rowdims 当中删除
//         2、在dims_option中增加
//         3、删除配套的列表
// parem  type 类型(行0、列1 、页面2、视点3)，
// id : dimession id
        const delDim = (type, id) => {
            //console.log("delete dimession id:" + id);
            let _dims;
            //这样就删除啦
            switch (type) {
                case 0:
                    _dims = this.state.rowDims;
                    break;
                case 1:
                    _dims = this.state.colDims;
                    break;
                case 2:
                    _dims = this.state.pageDims;
                    break;
                case 3:
                    _dims = this.state.viewDims;
                    break;
            }

            let _index = -1;
            let _r_dims_option = this.state.dims_option;
            let _temp = _dims.filter((_dim, index) => {
                _index = index;
                return _dim.id == id
            })
            if (_temp != undefined && _temp.length == 1) {
                _r_dims_option.push(_temp[0]);
            }

            switch (type) {
                case 0:
                    _rowLayouts.map(_g => {
                        if (_index >= 0) {
                            _g.theLayouts.splice(_index, 1);  //这是个数组  删除特定位置的元素
                        }
                    })
                    break;
                case 1:
                    _colLayouts.map(_g => {
                        if (_index >= 0) {
                            _g.theLayouts.splice(_index, 1);  //这是个数组  删除特定位置的元素
                        }
                    })
                    break;
                case 2:
                    _pageLayouts.splice(_index, 1);
                    break;
                case 3:
                    _viewLayouts.splice(_index, 1);
                    break;
            }


            let _arr_rowDims = _dims.filter((_dim, index) => {
                return _dim.id !== id
            })
            //删除每组当中对应的维度及成员

            // this.setState({rowDims: _arr_rowDims, dims_option: _r_dims_option})
            switch (type) {
                case 0:
                    this.setState({rowDims: _arr_rowDims, dims_option: _r_dims_option});
                    break;
                case 1:
                    this.setState({colDims: _arr_rowDims, dims_option: _r_dims_option})
                    break;
                case 2:
                    this.setState({pageDims: _arr_rowDims, dims_option: _r_dims_option})
                    break;
                case 3:
                    this.setState({viewDims: _arr_rowDims, dims_option: _r_dims_option})
                    break;
            }
        }

        //移动位置
        const moveUp_dim = (type, index) => {
            if (index === 0) {
                message.info("已经首部，不能再上移。")
                return;
            }
            if (type === 0) {
                let _rowDims = this.state.rowDims;
                let _rowLayouts = this.state.rowLayouts;
                [_rowDims[index - 1], _rowDims[index]] = [_rowDims[index], _rowDims[index - 1]];
                _rowLayouts.map(g => {
                    [g.theLayouts[index - 1], g.theLayouts[index]] = [g.theLayouts[index], g.theLayouts[index - 1]];
                });
                this.setState({rowDims: _rowDims, rowLayouts: _rowLayouts})
            } else if (type === 1) {
                let _colDims = this.state.colDims;
                let _colLayouts = this.state.colLayouts;
                [_colDims[index - 1], _colDims[index]] = [_colDims[index], _colDims[index - 1]];
                _colLayouts.map(g => {
                    [g.theLayouts[index - 1], g.theLayouts[index]] = [g.theLayouts[index], g.theLayouts[index - 1]];
                });
                this.setState({colDims: _colDims, colLayouts: _colLayouts})
            } else if (type === 2) {
                let _pageDims = this.state.pageDims;
                let _pageLayouts = this.state.pageLayouts;
                [_pageDims[index - 1], _pageDims[index]] = [_pageDims[index], _pageDims[index - 1]];
                [_pageLayouts[index - 1], _pageLayouts[index]] = [_pageLayouts[index], _pageLayouts[index - 1]];
                this.setState({pageDims: _pageDims, pageLayouts: _pageLayouts})
            } else if (type === 3) {
                let _viewDims = this.state.viewDims;
                let _viewLayouts = this.state.viewLayouts;
                [_viewDims[index - 1], _viewDims[index]] = [_viewDims[index], _viewDims[index - 1]];
                [_viewLayouts[index - 1], _viewLayouts[index]] = [_viewLayouts[index], _viewLayouts[index - 1]];
                this.setState({viewDims: _viewDims, viewLayouts: _viewLayouts})
            }
            // let _rowDims = this.state.rowDims;
            // let _rowLayouts = this.state.rowLayouts;
            // [_rowDims[index - 1], _rowDims[index]] = [_rowDims[index], _rowDims[index - 1]];
            // _rowLayouts.map(g => {
            //     [g.theLayouts[index - 1], g.theLayouts[index]] = [g.theLayouts[index], g.theLayouts[index - 1]];
            // });
            // this.setState({rowDims: _rowDims, rowLayouts: _rowLayouts})
        }

        const moveDown_dim = (type, index) => {
            if (type === 0) {
                let _rowDims = this.state.rowDims;
                let _l = _rowDims.length;
                if (_l == 0) return;
                if (index == (_l - 1)) {
                    message.info("已经最后了，不能再下移。")
                    return;
                }

                let _rowLayouts = this.state.rowLayouts;
                [_rowDims[index + 1], _rowDims[index]] = [_rowDims[index], _rowDims[index + 1]];
                _rowLayouts.map(g => {
                    [g.theLayouts[index + 1], g.theLayouts[index]] = [g.theLayouts[index], g.theLayouts[index + 1]];
                });
                this.setState({rowDims: _rowDims, rowLayouts: _rowLayouts})
            } else if (type === 1) {
                let _colDims = this.state.colDims;
                let _l = _colDims.length;
                if (_l == 0) return;
                if (index == (_l - 1)) {
                    message.info("已经最后了，不能再下移。")
                    return;
                }

                let _colLayouts = this.state.colLayouts;
                [_colDims[index + 1], _colDims[index]] = [_colDims[index], _colDims[index + 1]];
                _colLayouts.map(g => {
                    [g.theLayouts[index + 1], g.theLayouts[index]] = [g.theLayouts[index], g.theLayouts[index + 1]];
                });
                this.setState({colDims: _colDims, colLayouts: _colLayouts})

            } else if (type === 2) {
                let _pageDims = this.state.pageDims;
                let _l = _pageDims.length;
                if (_l == 0) return;
                if (index == (_l - 1)) {
                    message.info("已经最后了，不能再下移。")
                    return;
                }
                let _pageLayouts = this.state.pageLayouts;
                [_pageDims[index + 1], _pageDims[index]] = [_pageDims[index], _pageDims[index + 1]];
                [_pageLayouts[index + 1], _pageLayouts[index]] = [_pageLayouts[index], _pageLayouts[index + 1]];
                this.setState({pageDims: _pageDims, pageLayouts: _pageLayouts})
            } else if (type === 3) {
                let _viewDims = this.state.viewDims;
                let _l = _viewDims.length;
                if (_l == 0) return;
                if (index == (_l - 1)) {
                    message.info("已经最后了，不能再下移。")
                    return;
                }
                let _viewLayouts = this.state.viewLayouts;
                [_viewDims[index + 1], _viewDims[index]] = [_viewDims[index], _viewDims[index + 1]];
                [_viewLayouts[index + 1], _viewLayouts[index]] = [_viewLayouts[index], _viewLayouts[index + 1]];
                this.setState({viewDims: _viewDims, viewLayouts: _viewLayouts})
            }
            // let _rowDims = this.state.rowDims;
            // let _l = _rowDims.length;
            // if (_l == 0) return;
            // if (index == (_l - 1)) {
            //     message.info("已经最后了，不能再下移。")
            //     return;
            // }
            //
            // let _rowLayouts = this.state.rowLayouts;
            // [_rowDims[index + 1], _rowDims[index]] = [_rowDims[index], _rowDims[index + 1]];
            // _rowLayouts.map(g => {
            //     [g.theLayouts[index + 1], g.theLayouts[index]] = [g.theLayouts[index], g.theLayouts[index + 1]];
            // });
            // this.setState({rowDims: _rowDims, rowLayouts: _rowLayouts})
        }


        //增加维度
        // 1、找到可添加维度
        // 2、增加到目标维度当中
        // 3、目标布局中增加
        const addDim = (type, id) => {
            //这样就删除啦
            //let _index = -1;
            let _r_dims_option = this.state.dims_option;
            let _temp = _r_dims_option.filter((_dim, index) => {
                //  _index = index;
                return _dim.id == id
            })
            let _dims = this.state.rowDims;
            switch (type) {
                case 0:
                    _dims = this.state.rowDims;
                    break;
                case 1:
                    _dims = this.state.colDims;
                    break;
                case 2:
                    _dims = this.state.pageDims;
                    break;
                case 3:
                    _dims = this.state.viewDims;
                    break;
            }
            if (_temp != undefined && _temp.length == 1) {
                _dims.push(_temp[0]);
            }

            if (type === 0) {
                _rowLayouts.map(_g => {
                    _g.theLayouts.push(
                        {
                            "position": 0,
                            "theLayoutName": "",
                            "formLayout_Mbrs": []
                        }
                    );
                });
                let _arr_rowDims = this.state.dims_option.filter((_dim, index) => {
                    return _dim.id !== id
                })
                //删除每组当中对应的维度及成员
                this.setState({dims_option: _arr_rowDims, rowDims: _dims})
            } else if (type === 1) {
                _colLayouts.map(_g => {
                    // _g.theLayouts.splice(_index, 1);  //这是个数组  删除特定位置的元素
                    _g.theLayouts.push(
                        {
                            "position": 0,
                            "theLayoutName": "",
                            "formLayout_Mbrs": []
                        }
                    );
                });
                let _arr_rowDims = this.state.dims_option.filter((_dim, index) => {
                    return _dim.id !== id
                })
                //删除每组当中对应的维度及成员
                this.setState({dims_option: _arr_rowDims, colDims: _dims})
            } else if (type === 2) {

                _pageLayouts.push(
                    {
                        "position": 0,
                        "theLayoutName": "",
                        "formLayout_Mbrs": []
                    }
                );

                let _arr_rowDims = this.state.dims_option.filter((_dim, index) => {
                    return _dim.id !== id
                })
                //删除每组当中对应的维度及成员
                this.setState({dims_option: _arr_rowDims, pageDims: _dims})


            } else if (type === 3) {

                _viewLayouts.push(
                    {
                        "position": 0,
                        "theLayoutName": "",
                        "formLayout_Mbrs": []
                    }
                );

                let _arr_rowDims = this.state.dims_option.filter((_dim, index) => {
                    return _dim.id !== id
                })
                //删除每组当中对应的维度及成员
                this.setState({dims_option: _arr_rowDims, viewDims: _dims})
            }
        }

        const _row_g_0 = this.state.rowLayouts;

        // add group
        const addGroup = (type) => {
            let _layouts;
            let _dims;
            let groupNamePrefix = "";
            switch (type) {
                case 0:
                    _layouts = this.state.rowLayouts;
                    _dims = this.state.rowDims;
                    groupNamePrefix = "rowLayout_group"
                    break;
                case 1:
                    _layouts = this.state.colLayouts;
                    _dims = this.state.colDims;
                    groupNamePrefix = "colLayout_group"
                    break;
            }
            let _l = _layouts.length
            let _newGroup =
                {
                    "position": _l,
                    "groupName": groupNamePrefix + _l,
                    "theLayouts": []
                }

            _dims.forEach((item, index) => {
                _newGroup.theLayouts.push(
                    {
                        "position": index,
                        "theLayoutName": item.name,
                        "formLayout_Mbrs": []
                    }
                )
            })
            if (type === 0) {
                _rowLayouts.push(_newGroup)

                this.setState({rowLayouts: _rowLayouts})
            } else if (type === 1) {
                _colLayouts.push(_newGroup)

                this.setState({colLayouts: _colLayouts})

            }
            //================================
            // let _rowLayouts=this.state.rowLayouts;
            // let _rowDims=this.state.rowDims;
            // let _l=_rowLayouts.length
            // //add  group
            // let _newGroup=
            // {
            //     "position": _l,
            //     "groupName": "rowLayout_group"+_l,
            //     "theLayouts": []
            // }
            // _rowDims.forEach((item,index)=>{
            //     _newGroup.theLayouts.push(
            //         {
            //             "position": index,
            //             "theLayoutName": item.name,
            //             "formLayout_Mbrs": []
            //         }
            //     )
            // })
            // _rowLayouts.push(_newGroup)
            //
            // this.setState({rowLayouts:_rowLayouts})
        }


        const delGroup = (index) => {
            if (index === 0) {
                this.state.rowLayouts.splice(index, 1);
                this.setState({rowLayouts: this.state.rowLayouts})
            } else if (index === 1) {
                this.state.colLayouts.splice(index, 1);
                this.setState({colLayouts: this.state.colLayouts})
            }
        }

        const delTargetMbr = (index) => {
            this.state.targetFormLayout_Mbrs.splice(index, 1);
            this.setState({targetFormLayout_Mbrs: this.state.targetFormLayout_Mbrs});
        }

        //删除行和列
        // const delTargetMbr = (index) => {
        //     this.state.targetFormLayout_Mbrs.splice(index, 1);
        //     this.setState({targetFormLayout_Mbrs: this.state.targetFormLayout_Mbrs});
        // }



// append selected dimession  member to target List
        const appendMbr = () => {
            //是否应该写个构造函数呢？
            let _o = {
                id: this.state.selectedMbr.id,
                name: this.state.selectedMbr.name,
                queryType: this.state.selectedFunId
            }

            this.state.targetFormLayout_Mbrs.push(_o);
            this.setState({targetFormLayout_Mbrs: this.state.targetFormLayout_Mbrs})
        }

        // 工厂方法
        const createMbr_in_Layout = (id, name, type, queryType) => {
            // 创建一个新对象
            var obj = new Object();
            // 给对象赋值
            obj.id = id;
            obj.memberId = id;
            obj.name = name;
            obj.type = type;
            obj.queryType = queryType;

            // 将新对象返回
            return obj
        }

        // 工厂方法
        const createGroup = (position, groupName) => {
            // 创建一个新对象
            var obj = new Object();
            // 给对象赋值
            obj.position = position;
            obj.groupName = groupName;
            obj.theLayouts=[];
            return obj
        }

        const createnewLayoutObj = (position, name) => {
            // 创建一个新对象
            var obj = new Object();
            // 给对象赋值
            obj.position = position;
            obj.theLayoutName = name;
            obj.formLayout_Mbrs=[];
            return obj
        }


        const createNewLayoutMbr = (dimId, formId,id,layoutGroup,layoutType,memberId,ordinal,queryType,readonly) => {
            // 创建一个新对象
            var obj = new Object();
            // 给对象赋值
            obj.dimId = dimId;
            obj.formId = formId;
            obj.id=id;
            obj.layoutGroup = layoutGroup;
            obj.layoutType = layoutType;
            obj.memberId=memberId;
            obj.ordinal = ordinal;
            obj.queryType = queryType;
            obj.readonly=readonly;
            return obj
        }


        const onFinish = (values) => {
            console.log('Success:', values);
        };
        return (
            <>

                <Row>表单定义</Row>

                <Row>
                    <Col span={8}>
                        <Row>
                            <Button onClick={createFolder}>创建</Button>
                            <Button onClick={editFolder}>重命名</Button>
                            <Button>移动</Button>
                            <Button onClick={deleteFolder}>删除</Button>
                        </Row>
                        <Divider/>


                        <Tree
                            //checkable
                            onSelect={onSelect}
                            //onCheck={onCheck}
                            treeData={this.state.formFolders}
                        />

                        <Modal title="管理文件夹"
                               key={"manageFolder_Modal"}
                               visible={this.state.isModalVisibleForFold}
                               onOk={handleOk_folder}
                               onCancel={handleCancel_folder}
                               destroyOnClose
                        >
                            <Form
                                {...layout_fold}
                                ref={this.formFolderRef}
                                name="foldName"
                                onFinish={onFinish_fold}
                                onFinishFailed={onFinish_fold}
                                initialValues={{
                                    name_folder: modifyName
                                }}
                                // form={form}//这里需要注册一下form
                                // ref={this.formRef}//这里注册一下ref
                            >
                                <Form.Item
                                    label="文件夹名称"
                                    name="name_folder"
                                    rules={[{required: true, message: 'Please input your fold name!'}]}
                                >
                                    <Input/>
                                </Form.Item>

                            </Form>


                        </Modal>


                    </Col>

                    <Col span={16}>
                        <Row>
                            <Button onClick={() => this.openFormModalForCreating()}>创建</Button>
                            <Button onClick={() => this.openModifyFormModal()}>修改</Button>
                            <Button>移动</Button>
                            <Button onClick={delForm}>删除</Button>
                            <Button>另存为</Button>
                            <Button>属性维</Button>
                            <span></span>

                            {this.state.selectedFormIds.length===1 ?

                                <Button
                                // to={ '/viewForm/' + this.state.selectedFormId }
                            >
                                <Link to={'/viewForm/' + this.state.selectedFormIds[0]}>查看</Link>

                            </Button>:
                                <Button
                                   disabled
                                >
                                    查看

                                </Button>
                            }

                        </Row>
                        <Divider/>

                        <Table columns={formColumns}
                               dataSource={this.state.forms}
                            //dataSource={data}
                               rowKey="id"
                               rowSelection={{
                                   type: 'checkbox',
                                   ...rowSelection,
                               }}

                        />


                        {/*<FormList*/}
                        {/*formFolderId={this.state.selectedFolderId}*/}
                        {/*selectForm={this.selectForm}     //选中表单*/}
                        {/*/>*/}
                        <Modal
                            key={"form_Modal"}
                            width={1024}
                            height={1000}
                            title="表单详细定义"
                            visible={this.state.isModalVisibleForForm}
                            confirmLoading={this.props.confirmLoading}
                            maskClosable={false}
                            //onOk={() => handleOk_formModify()}
                            //okText='保存'
                            //cancelText='返回'
                            onCancel={handleCancel_formModify}
                            footer={null}
                            destroyOnClose
                        >


                            <>
                                <Form
                                    name="modifyFormForm"
                                    initialValues={{
                                        formId:_formId,
                                        formName: _formName,
                                        reportDesc: _reportDesc,
                                        remark: _remark,
                                        scale: _scale,
                                        approval: _approval,
                                    }}
                                    layout={"vertical"}
                                    onFinish={onFinish_modifyForm}
                                    onFinishFailed={onFinishFailed_modifyForm}
                                    //ref={this.formRef}//这里注册一下ref

                                >



                                    <Tabs defaultActiveKey="0" onChange={callback_Form}>
                                        <TabPane tab="属性" key="0">

                                            {/*<Form>*/}
                                            <Row gutter={16}>
                                                <Col span={24}>

                                                    <Form.Item
                                                        //key={"formId"}
                                                          name="formId"
                                                        rules={[{
                                                            required: false,
                                                        }]}
                                                        // hidden={true}
                                                    >

                                                        {/*<div>*/}
                                                        <Input
                                                            key="input_form_Id"
                                                            disabled={true}
                                                        />
                                                    </Form.Item>




                                                    <Form.Item
                                                        key={"formName"}
                                                        label="表单名称"
                                                        name="formName"
                                                        rules={[{
                                                            required: true,
                                                            message: 'Please input your report name!'
                                                        }]}
                                                    >

                                                        {/*<div>*/}
                                                        <Input
                                                            key="input_form_name"
                                                            //onBlur={this.onBlur}
                                                            //onKeyPress={this.onKeyPressOnInput}
                                                            //onChange={this.onChangeFormtName}

                                                        />
                                                        {/*</div>*/}
                                                    </Form.Item>

                                                    <Form.Item
                                                        key={"reportDesc"}
                                                        label="表单描述"
                                                        name="reportDesc"
                                                        rules={[{message: 'Please input your report Desc!'}]}
                                                    >
                                                        <Input
                                                            key="input_form_desc"
                                                            //onBlur={this.onBlur}
                                                            //onKeyPress={this.onKeyPressOnInput}
                                                            //onChange={this.onChangeAtReportDesc}
                                                            //autoFocus
                                                        />
                                                    </Form.Item>

                                                    <Form.Item
                                                        key={"renark"}
                                                        label="表单说明"
                                                        name="remark"
                                                        rules={[{message: 'Please input your  note!'}]}
                                                    >

                                                        {/*<div>*/}
                                                        <Input
                                                            key="input_form_note"

                                                        />
                                                        {/*</div>*/}
                                                    </Form.Item>


                                                </Col>
                                            </Row>

                                            {/*</Form>*/}


                                        </TabPane>


                                        <TabPane tab="行布局" key="1">
                                            <Row>
                                                <Col span={7}>
                                                    <List
                                                        size="small"
                                                        key="test009"
                                                        header={<Row>
                                                            <h3>行维度结构</h3></Row>}
                                                        bordered
                                                        dataSource={_rowDims}
                                                        renderItem={(item, index) =>
                                                            <List.Item
                                                                key={index}
                                                                actions={[<Button
                                                                    key={"rowLayout_list-dimession-delete" + index}
                                                                    type="primary"
                                                                    icon={<DeleteRowOutlined/>}
                                                                    shape="circle"
                                                                    onClick={() => delDim(0, item.id)}
                                                                />,
                                                                    <Button key={"list-dimession-up" + index}
                                                                            type="primary"
                                                                        // key={index}
                                                                            icon={<ArrowUpOutlined/>}
                                                                            shape="circle"
                                                                            onClick={() => moveUp_dim(0, index)}
                                                                    />,
                                                                    <Button key={"list-dimession-down" + index}
                                                                            type="primary"
                                                                        // key={index}
                                                                            icon={<ArrowDownOutlined/>}
                                                                            shape="circle"
                                                                            onClick={() => moveDown_dim(0, index)}
                                                                    />
                                                                ]}>{item.name}
                                                            </List.Item>}
                                                    />

                                                    <Divider>可添加维(DIMESSION)</Divider>

                                                    <List
                                                        size="small"
                                                        key="test110"
                                                        bordered
                                                        dataSource={_dims_option}
                                                        renderItem={(item, index) =>
                                                            <List.Item
                                                                key={index}
                                                                actions={[<Button key={"list-dimession-add" || index}
                                                                                  type="primary"
                                                                                  icon={<PlusOutlined/>}
                                                                                  shape="circle"
                                                                                  onClick={() => addDim(0, item.id)}
                                                                ></Button>

                                                                ]}>{item.name}
                                                            </List.Item>}
                                                    />
                                                    <Divider>ADD GROUP</Divider>
                                                    <Row justify="end">

                                                        <Button
                                                            onClick={() => addGroup(0)}
                                                        >添加组</Button>
                                                    </Row>
                                                </Col>

                                                <Col span={1}></Col>

                                                <Col span={16}>

                                                    <Tabs defaultActiveKey="1" onChange={callback_group}
                                                          key={"row_tabs_Tabs"}>
                                                        {_rowLayouts.map((_g, index_group) =>

                                                                <TabPane tab={"组" + (index_group + 1)}
                                                                         key={"row_tabs" + index_group}>
                                                                    <Collapse
                                                                        destroyInactivePanel={true}
                                                                        defaultActiveKey={['1']}
                                                                        key={"row_tabs_Collapse" + index_group}>
                                                                        {_rowDims.map((_d, layout_dim_index) => <Panel
                                                                            header={_d.name}
                                                                            key={"_rowDim" + _d.id}>
                                                                            {/*循环产生*/}
                                                                            <List
                                                                                itemLayout="horizontal"
                                                                                dataSource={_g.theLayouts[layout_dim_index].formLayout_Mbrs}
                                                                                key={"r" + layout_dim_index}
                                                                                renderItem={(item, index3) => (
                                                                                    <List.Item
                                                                                        actions={[<Button
                                                                                            key={"r_item_list-dimession-delete" + item.name}
                                                                                            icon={<DeleteRowOutlined/>}
                                                                                            shape="circle"/>]}
                                                                                    >
                                                                                        <List.Item.Meta
                                                                                            title={item.name}
                                                                                            key={"r_item_meta_" + item.name}
                                                                                            description={this.state.funList[item.queryType + 0]}
                                                                                        />
                                                                                    </List.Item>
                                                                                )}
                                                                            />
                                                                            <Row justify="end"
                                                                                 key={"row_end" + layout_dim_index}>
                                                                                <Button type="link"
                                                                                        key={"row_end-_btn" + layout_dim_index}
                                                                                        onClick={() => {
                                                                                            select_dim_mbr(_d.id, 0, index_group, layout_dim_index)
                                                                                        }}>选择</Button>
                                                                            </Row>


                                                                        </Panel>)}
                                                                    </Collapse>

                                                                    {
                                                                        index_group > 0 ? (<>
                                                                                <Divider/>
                                                                                <Button key={"rowGroupDel_Btn_"+index_group}
                                                                                        onClick={() => {
                                                                                            delGroup(0, index_group)
                                                                                        }}>删除本组</Button>
                                                                            </>
                                                                        ) : null
                                                                    }
                                                                </TabPane>
)
                                                        }
                                                    </Tabs>


                                                </Col>


                                            </Row>



                                        </TabPane>

                                        <TabPane tab="列布局" key="2">
                                            <Row>
                                                <Col span={7}>
                                                    <List
                                                        size="small"
                                                        key="test112"
                                                        header={<div><h3>维度结构</h3></div>}
                                                        // footer={<div>Footer</div>}
                                                        bordered
                                                        dataSource={_colDims}
                                                        renderItem={(item, index) =>
                                                            <List.Item key={"rowitem" + index}
                                                                       actions={[<Button
                                                                           key={"list-dimession-col-delete__" + index}
                                                                           type="primary"
                                                                           icon={<DeleteRowOutlined/>}
                                                                           shape="circle"
                                                                           onClick={() => delDim(1, item.id)}
                                                                       />,
                                                                           <Button key={"list-dimession-col-up___" + index}
                                                                                   type="primary"
                                                                               // key={index}
                                                                                   icon={<ArrowUpOutlined/>}
                                                                                   shape="circle"
                                                                                   onClick={() => moveUp_dim(1, index)}
                                                                           />,
                                                                           <Button
                                                                               key={"list-dimession-col-down___" + index}
                                                                               type="primary"
                                                                               // key={index}
                                                                               icon={<ArrowDownOutlined/>}
                                                                               shape="circle"
                                                                               onClick={() => moveDown_dim(1, index)}
                                                                           />
                                                                       ]}
                                                            >{item.name}</List.Item>}
                                                    />


                                                    <Divider>可添加维(DIMESSION)</Divider>

                                                    <List
                                                        size="small"
                                                        key="colDimAdd001"
                                                        bordered
                                                        dataSource={_dims_option}
                                                        renderItem={(item, index) =>
                                                            <List.Item
                                                                key={"col" + item.key}
                                                                actions={[<Button key={"list-dimession-add" || item.key}
                                                                                  type="primary"
                                                                                  icon={<PlusOutlined/>}
                                                                                  shape="circle"
                                                                                  onClick={() => addDim(1, item.id)}
                                                                ></Button>
                                                                ]}>{item.name}
                                                            </List.Item>}
                                                    />
                                                    <Divider>ADD GROUP</Divider>
                                                    <Row justify="end">

                                                        <Button
                                                            onClick={() => addGroup(1)}
                                                        >添加组</Button>
                                                    </Row>


                                                </Col>
                                                <Col span={1}/>

                                                <Col span={16}>
                                                    <Tabs defaultActiveKey="1" onChange={callback} key={"col_tabs"}>
                                                        {_colLayouts.map((_g, index_group) => <TabPane
                                                            tab={"列" + (index_group + 1)}
                                                            key={"colGroup_" + index_group}>
                                                            <Collapse
                                                                defaultActiveKey={['1']}
                                                                key={"colGroupCollapse_"+index_group}
                                                            >
                                                                {_colDims.map((_d, layout_dim_index) => <Panel
                                                                    header={_d.name}
                                                                    key={"_rowDim" + _d.key}>

                                                                    <List
                                                                        itemLayout="horizontal"
                                                                        key={layout_dim_index}
                                                                        dataSource={_g.theLayouts[layout_dim_index].formLayout_Mbrs}
                                                                        renderItem={(item, index3) => (
                                                                            <List.Item
                                                                                key={"List.Item"+index3}
                                                                            >
                                                                                <List.Item.Meta
                                                                                    title={item.name}
                                                                                    key={"c_item_meta_" + item.name}
                                                                                    description={this.state.funList[item.queryType + 0]}
                                                                                />
                                                                            </List.Item>
                                                                        )}></List>

                                                                    <Row justify="end"
                                                                         key={"col_end" + layout_dim_index}>
                                                                        <Button type="link"
                                                                                key={"col_end-_btn" + layout_dim_index}
                                                                                onClick={() => {
                                                                                    select_dim_mbr(_d.id, 1, index_group, layout_dim_index)
                                                                                }}>选择</Button>
                                                                    </Row>
                                                                </Panel>)}
                                                            </Collapse>


                                                            {
                                                                index_group > 0 ? (<>
                                                                        <Divider/>
                                                                        <Button key={"colgroupBtn" + index_group}
                                                                                onClick={() => {
                                                                                    delGroup(1, index_group)
                                                                                }}>删除本组</Button>
                                                                    </>
                                                                ) : null
                                                            }

                                                        </TabPane>)
                                                        }
                                                    </Tabs>


                                                </Col>


                                            </Row>

                                        </TabPane>


                                        <TabPane tab="页面布局" key="3">
                                            <Row>
                                                <Col span={7}>
                                                    <List
                                                        size="small"
                                                        key="test200"
                                                        header={<div><h3>页面维度结构</h3></div>}
                                                        // footer={<div>Footer</div>}
                                                        bordered
                                                        dataSource={_pageDims}
                                                        renderItem={(item, index) =>


                                                            <List.Item key={"test200_"+item.key}
                                                                       actions={[<Button
                                                                           key={"list-dimession-col-delete" + item.key}
                                                                           type="primary"
                                                                           icon={<DeleteRowOutlined/>}
                                                                           shape="circle"
                                                                           onClick={() => delDim(2, item.id)}
                                                                       />,
                                                                           <Button key={"list-dimession-col-up_" + item.key}
                                                                                   type="primary"
                                                                               // key={index}
                                                                                   icon={<ArrowUpOutlined/>}
                                                                                   shape="circle"
                                                                                   onClick={() => moveUp_dim(2, index)}
                                                                           />,
                                                                           <Button
                                                                               key={"list-dimession-col-down___" + item.key}
                                                                               type="primary"
                                                                               // key={index}
                                                                               icon={<ArrowDownOutlined/>}
                                                                               shape="circle"
                                                                               onClick={() => moveDown_dim(2, index)}
                                                                           />
                                                                       ]}


                                                            >{item.name}</List.Item>}
                                                    />

                                                    <Divider>可添加维(DIMESSION)</Divider>

                                                    <List
                                                        size="small"
                                                        key="test112"
                                                        bordered
                                                        dataSource={_dims_option}
                                                        renderItem={(item, index) =>
                                                            <List.Item
                                                                key={"test112" + item.key}
                                                                actions={[<Button
                                                                    key={"test112-list-dimession-add" || item.key}
                                                                    type="primary"
                                                                    icon={<PlusOutlined/>}
                                                                    shape="circle"
                                                                    onClick={() => addDim(2, item.id)}
                                                                ></Button>

                                                                ]}>{item.name}
                                                            </List.Item>}
                                                    />


                                                </Col>
                                                <Col span={1}/>

                                                <Col span={16}>
                                                    <Collapse defaultActiveKey={['1']}>
                                                        {_pageDims.map((_d, layout_dim_index) => <Panel header={_d.name}
                                                                                                        key={"page_Collapse"+_d.id}>

                                                            <List
                                                                itemLayout="horizontal"
                                                                key={"page_Collapse_list" + layout_dim_index}
                                                                dataSource={_pageLayouts[layout_dim_index].formLayout_Mbrs}
                                                                renderItem={(item, index3) => (
                                                                    <List.Item
                                                                        key={"p"+item.id}
                                                                    >
                                                                        {/*<List.Item.Meta*/}
                                                                        {/*    title={item.name}*/}
                                                                        {/*    key={index3}*/}
                                                                        {/*    description="Ant Design, a design language for background applications, is refined by Ant UED Team"*/}
                                                                        {/*/>*/}

                                                                        <List.Item.Meta
                                                                            title={item.name}
                                                                            key={"p_item_meta_" + item.id}
                                                                            description={this.state.funList[item.queryType + 0]}
                                                                        />


                                                                    </List.Item>
                                                                )}
                                                            />


                                                            <Row justify="end"
                                                                 key={"page_end" + layout_dim_index}>
                                                                <Button type="link"
                                                                        key={"page_end-_btn_" + layout_dim_index}
                                                                        onClick={() => {
                                                                            select_dim_mbr(_d.id, 2, -1, layout_dim_index)
                                                                        }}>选择</Button>
                                                            </Row>


                                                        </Panel>)}
                                                    </Collapse>
                                                </Col>


                                            </Row>

                                        </TabPane>

                                        <TabPane tab="视点布局" key="4">
                                            <Row>
                                                <Col span={7}>
                                                    <List
                                                        size="small"
                                                        key="test001"
                                                        header={<div><h3>视点维度结构</h3></div>}
                                                        // footer={<div>Footer</div>}
                                                        bordered
                                                        dataSource={_viewDims}
                                                        renderItem={(item, index3) =>


                                                            <List.Item key={item.key}
                                                                       actions={[<Button
                                                                           key={"list-dimession-col-delete" + item.key}
                                                                           type="primary"
                                                                           icon={<DeleteRowOutlined/>}
                                                                           shape="circle"
                                                                           onClick={() => delDim(3, item.id)}
                                                                       />,
                                                                           <Button
                                                                               key={"list-dimession-col-up" + item.key}
                                                                               type="primary"
                                                                               // key={index}
                                                                               icon={<ArrowUpOutlined/>}
                                                                               shape="circle"
                                                                               onClick={() => moveUp_dim(3, index3)}
                                                                           />,
                                                                           <Button
                                                                               key={"list-dimession-col-down" + item.key}
                                                                               type="primary"
                                                                               // key={index}
                                                                               icon={<ArrowDownOutlined/>}
                                                                               shape="circle"
                                                                               onClick={() => moveDown_dim(3, index3)}
                                                                           />
                                                                       ]}

                                                            >{item.name}</List.Item>}
                                                    />
                                                    <Divider>可添加维(DIMESSION)</Divider>

                                                    <List
                                                        size="small"
                                                        key="test119"
                                                        bordered
                                                        dataSource={_dims_option}
                                                        renderItem={(item, index) =>
                                                            <List.Item
                                                                key={"test119" + item.key}
                                                                actions={[<Button
                                                                    key={"test119_list-dimession-add" || item.key}
                                                                    type="primary"
                                                                    icon={<PlusOutlined/>}
                                                                    shape="circle"
                                                                    onClick={() => addDim(3, item.id)}
                                                                ></Button>

                                                                ]}>{item.name}
                                                            </List.Item>}
                                                    />


                                                </Col>
                                                <Col span={1}/>

                                                <Col span={16}>
                                                    <Collapse defaultActiveKey={['1']}>
                                                        {_viewDims.map((_d, layout_dim_index) => <Panel header={_d.name}
                                                                                                        key={_d.id}>
                                                            <List
                                                                itemLayout="horizontal"
                                                                key={"_viewDims__"+layout_dim_index}
                                                                dataSource={_viewLayouts[layout_dim_index].formLayout_Mbrs}
                                                                renderItem={(item, index3) => (
                                                                    <List.Item
                                                                        key={"v"+index3}
                                                                    >
                                                                        {/*<List.Item.Meta*/}
                                                                        {/*    title={item.name}*/}
                                                                        {/*    key={index3}*/}
                                                                        {/*    description="Ant Design, a design language for background applications, is refined by Ant UED Team"*/}
                                                                        {/*/>*/}
                                                                        <List.Item.Meta
                                                                            title={item.name}
                                                                            key={"v_item_meta_" + item.name}
                                                                            description={this.state.funList[item.queryType + 0]}
                                                                        />


                                                                    </List.Item>
                                                                )}
                                                            />

                                                            <Row justify="end"
                                                                 key={"page_end" + layout_dim_index}>
                                                                <Button type="link"
                                                                        key={"page_end-_btn" + layout_dim_index}
                                                                        onClick={() => {
                                                                            select_dim_mbr(_d.id, 3, -1, layout_dim_index)
                                                                        }}>选择</Button>
                                                            </Row>


                                                        </Panel>)}
                                                    </Collapse>
                                                </Col>

                                            </Row>

                                        </TabPane>

                                        <TabPane tab="其他选项" key="5">


                                            <Form.Item
                                                name={"scale"}
                                                key={"scale"}
                                                // defaultValue="2"
                                                label="精度:"
                                                rules={[
                                                    {
                                                        required: false,
                                                    },
                                                ]}
                                            >
                                                <Select style={{width: 120}} onChange={handleChange}>
                                                    <Option key="0" value="0">0</Option>
                                                    <Option key="1" value="1">1</Option>
                                                    <Option key="2" value="2">2</Option>
                                                    <Option key="3" value="3">3</Option>
                                                    <Option key="4" value="4">4</Option>
                                                    <Option key="5" value="5">5</Option>
                                                </Select>
                                            </Form.Item>


                                            <Form.Item
                                                name={"approval"}
                                                key={"approval"}
                                                label="送审:"
                                                rules={[
                                                    {
                                                        required: false,
                                                    },
                                                ]}
                                            >
                                                <Checkbox onChange={onChange_approval}></Checkbox>
                                            </Form.Item>


                                        </TabPane>


                                        <TabPane tab="规则" key="6">
                                            Content of Tab Pane 7
                                        </TabPane>

                                    </Tabs>

                                    <Row>
                                    <Col span={16}></Col>
                                    <Col span={3}>
                                        {/*<Button type="primary" onClick={this.confirm}>确定</Button>*/}
                                        <Button type="primary" htmlType="submit">
                                            保存
                                        </Button>
                                    </Col>
                                    <Col span={3}>
                                        <Button
                                            onClick={handleCancel_formModify}
                                        >关闭</Button>
                                    </Col>
                                    <Col span={2}></Col>
                                    </Row>
                                </Form>
                            </>


                        </Modal>


                        <Modal title="select DimMbr Modal"
                               key="select DimMbr Modal"
                               visible={this.state.isModalVisibleForSelDimMbr}
                               width={896}
                               height={800}
                               zIndex={1010}
                               onOk={handleOk_selDimMbr}
                               onCancel={handleCancel_selDimMbr}
                               destroyOnClose>

                            <Row

                            >
                                <Col span={8}>

                                    <Tree
                                        onSelect={onSelect_selectMbr}
                                        treeData={this.state.treeData_forSelDimMbr}
                                    />
                                </Col>
                                <Col span={1}></Col>
                                {/*<Col span={4} type="flex" align="middle" justifyContent="center">*/}
                                <Col>
                                    <Divider/>
                                    <Divider/>
                                    <Select key='fun' defaultValue="0"
                                            style={{width: 120}}
                                            onChange={(value) => {
                                                handleChange_function(value)
                                            }}
                                    >
                                        <Option value="0" key="funOpt0">成员</Option>
                                        <Option value="1" key="funOpt01">后代</Option>
                                        <Option value="2" key="funOpt02">后代 (包含)</Option>
                                        <Option value="3" key="funOpt03">子代</Option>
                                        <Option value="4" key="funOpt04">子代 (包含)</Option>
                                        <Option value="5" key="funOpt05">祖先</Option>
                                        <Option value="6" key="funOpt06">祖先 (包含)</Option>
                                        <Option value="7" key="funOpt07">父代</Option>
                                        <Option value="8" key="funOpt08">父代 (包含)</Option>
                                        <Option value="9" key="funOpt09">同级</Option>
                                        <Option value="10" key="funOpt010">同级 (包含)</Option>
                                        <Option value="11" key="funOpt011">零级后代</Option>
                                        <Option value="12" key="funOpt012">零级后代(包含)</Option>
                                    </Select>
                                    <Divider/>
                                    <Button
                                        icon={<RightOutlined/>}
                                        shape="circle"
                                        type="primary"
                                        onClick={() => {
                                            appendMbr()
                                        }}
                                    />
                                </Col>
                                <Col span={1}></Col>
                                <Col span={8}>
                                    <List
                                        itemLayout="horizontal"
                                        key="test005"
                                        dataSource={this.state.targetFormLayout_Mbrs}
                                        renderItem={(item, index) => (
                                            <List.Item
                                                key={"test005_item" + index}
                                                actions={[<Button
                                                    key={"list-target_dimession-delete" + item.name}
                                                    icon={<DeleteRowOutlined/>}
                                                    shape="circle"
                                                    onClick={() => delTargetMbr(index)}
                                                />]}
                                            >
                                                <List.Item.Meta
                                                    key={"test005_item.Meta" + index}
                                                    title={item.name}
                                                    description={this.state.funList[item.queryType + 0]}
                                                />
                                            </List.Item>
                                        )}
                                    />
                                </Col>
                            </Row>
                        </Modal>
                    </Col>
                </Row>
                <Row></Row>

            </>


        )
    }


}
